<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="tab.css">
</head>
<body>
  <div class="tab">
    <div class="tab_list">
      <ul>
        <li class="current">商品介绍</li>
        <li>规格与包装</li>
        <li>售后保障</li>
        <li>商品评价</li>
        <li>手机社区</li>
      </ul>
    </div>
    <div class="tab_con">
      <div class="item" style="display: block;">商品介绍模块内容</div>
      <div class="item" style="display: none;">规格与包装模块内容</div>
      <div class="item" style="display: none;">售后保障模块内容</div>
      <div class="item" style="display: none;">商品评价模块内容</div>
      <div class="item" style="display: none;">手机社区模块内容</div>
    </div>
  </div>
  <script>
    var list = document.querySelectorAll('li')
    var items = document.querySelectorAll('.item')
    for(var i=0;i<list.length;i++){
      list[i].setAttribute('index',i)
      list[i].onclick = gaibian   
      }
    function gaibian(){
      for(var i=0;i<list.length;i++){
        list[i].className = ''
      }
      this.className = 'current'
      for(var i=0;i<items.length;i++){
        items[i].style.display = 'none'
      }
      var index = this.getAttribute('index')
      items[index].style.display = 'block'
      }
  </script>
</body>
<html>